<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>疫情信息录入</title>
    <script src="/plugins/common/common-js.js" type="text/javascript"></script>
    <script src="/plugins/js/jquery-3.4.1.min.js" type="text/javascript"></script>
    <script src="/plugins/js/jquery-citys.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/css/data_entry.css">
</head>

<body>
    <div id="app" v-cloak>
        <el-container>
            <el-header>疫情信息录入</el-header>
            <el-container>
                <el-aside style="overflow-x: hidden;width:200px;background-color:#545c64">
                    <el-menu style="width:100%;" default-active="/entry" class="el-menu-vertical-demo"
                        background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" @select="selectPage">
                        <el-menu-item index="/entry">
                            <i class="el-icon-location"></i>
                            <span slot="title">疫情信息录入</span>
                        </el-menu-item>
                        <el-menu-item index="/entry/userInformation">
                            <i class="el-icon-setting"></i>
                            <span slot="title">用户信息管理</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>
                    <el-container id="fd-el-container">
                        <el-header id="fd-el-header" height="150px">
                            <el-row type="flex" justify="center" :gutter="20">
                                <el-col :span="6">
                                    <el-input v-model="
                                    patientname" placeholder="患者姓名"></el-input>
                                </el-col>
                                <el-col :span="6">
                                    <el-input v-model="
                                    idcard" placeholder="身份证"></el-input>
                                </el-col>
                            </el-row>
                            <el-row type="flex" justify="center" :gutter="20">

                                <el-col :span="6">
                                    <el-button type="primary" :loading="isloading" @click="createpatient">创建/查找患者信息
                                    </el-button>
                                </el-col>

                            </el-row>
                        </el-header>
                        <el-container>
                            <el-aside id="fd-el-aside" width="50%">
                                <div v-show="showmsg">
                                    <el-row style="margin-top: 0px;">
                                        <el-row type="flex" justify="center">
                                            <el-col>
                                                <span>
                                                    患者基本信息
                                                </span>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex">
                                            <el-col :span="3">
                                                <span>居住城市</span>
                                            </el-col>
                                            <el-col :span="18">
                                                <div class="citys" id="citys">
                                                    <select class="city-select" id="province" name="province"></select>
                                                    <select class="city-select" id="city" name="city"></select>
                                                    <select class="city-select" id="area" name="area"></select>
                                                </div>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex">
                                            <el-col :span="3">
                                                <span>性别</span>
                                            </el-col>
                                            <el-col :span="5" :offset="1">
                                                <el-radio v-model="patientMsg.sex" label="男">男</el-radio>
                                                <el-radio v-model="patientMsg.sex" label="女">女</el-radio>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex">
                                            <el-col :span="3">
                                                <span>年龄</span>
                                            </el-col>
                                            <el-col :span="6" :offset="1">
                                                <el-input v-model="patientMsg.age">
                                                    <template slot="append">岁</template>
                                                </el-input>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex">
                                            <el-col :span="3">
                                                <span>检测次数</span>
                                            </el-col>
                                            <el-col :span="6" :offset="1">
                                                <el-input v-model="patientMsg.jcNum">
                                                    <template slot="append">次</template>
                                                </el-input>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex">
                                            <el-col :span="3">
                                                <span>是否确诊</span>
                                            </el-col>
                                            <el-col :span="9" :offset="1">
                                                <el-radio v-model="patientMsg.grgl" label="1.0">是</el-radio>
                                                <el-radio v-model="patientMsg.grgl" label="0.0">否</el-radio>
                                                <el-radio v-model="patientMsg.grgl" label="2">治愈</el-radio>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex">
                                            <el-col :span="3">
                                                <span>隔离情况</span>
                                            </el-col>
                                            <el-col :span="7" :offset="1">
                                                <el-radio v-model="patientMsg.glqk" label="0">未隔离</el-radio>
                                                <el-radio v-model="patientMsg.glqk" label="1">已隔离</el-radio>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex">
                                            <el-col :span="3">
                                                <span>身体情况</span>
                                            </el-col>
                                            <el-col :span="8" :offset="1">
                                                <el-select v-model="patientMsg.jcbNum" placeholder="选择患者基础病情况">
                                                    <el-option v-for="item in jichubing" :key="item.value"
                                                        :label="item.label" :value="item.value"></el-option>
                                                </el-select>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex">
                                            <el-col :span="3">
                                                <span>手机号</span>
                                            </el-col>
                                            <el-col :span="6" :offset="1">
                                                <el-input v-model="patientMsg.phone">
                                                </el-input>
                                            </el-col>
                                            <el-col :span="3">
                                                <span>邮箱</span>
                                            </el-col>
                                            <el-col :span="6">
                                                <el-input v-model="patientMsg.email">
                                                </el-input>
                                            </el-col>
                                        </el-row>
                                    </el-row>
                                    <el-row>
                                        <el-button type="primary" @click="submitMsg">提交</el-button>
                                    </el-row>
                                </div>

                            </el-aside>
                            <el-main id="fd-el-main" width="50%">
                                <div v-show="showrelation">
                                    <el-row style="margin-top: 0px;">
                                        <el-col :span="6">
                                            <el-button type="mini" @click="newDialog1" id='fd-el-newDialog'>新增
                                            </el-button>
                                            <el-dialog :close-on-click-modal="false" title="新增接触者或者地区"
                                                :visible.sync="newDialogVisible" width="50%">
                                                <el-row>
                                                    <el-radio v-model="newSome" label="1">新增接触者</el-radio>
                                                    <el-radio v-model="newSome" label="2">新增地区</el-radio>
                                                    <el-radio v-model="newSome" label="3">新增接触的交通工具</el-radio>
                                                </el-row>
                                                <el-row v-show="newSome==1">
                                                    <el-row type="flex" justify="center" :gutter="20">
                                                        <el-col :span="3">
                                                            <span>姓名</span>
                                                        </el-col>
                                                        <el-col :span="6">
                                                            <el-input v-model="contactorData.contactorName"
                                                                placeholder="接触者姓名">

                                                            </el-input>
                                                        </el-col>
                                                        <el-col :span="3">
                                                            <span>身份证</span>
                                                        </el-col>
                                                        <el-col :span="6">
                                                            <el-input v-model="contactorData.contactorIdCard"
                                                                placeholder="接触者身份证">

                                                            </el-input>
                                                        </el-col>
                                                    </el-row>
                                                    <el-row type="flex" justify="center" :gutter="20">
                                                        <el-col :span="3">
                                                            <span>接触类型</span>
                                                        </el-col>
                                                        <el-col :span="6">

                                                            <el-select v-model="contactorData.contactName"
                                                                placeholder="请选择">
                                                                <el-option v-for="item in contactType" :key="item.value"
                                                                    :label="item.label" :value="item.value">
                                                                </el-option>
                                                            </el-select>
                                                        </el-col>
                                                        <el-col :span="3">
                                                            <span>接触环境</span>
                                                        </el-col>
                                                        <el-col :span="6">
                                                            <el-select v-model="contactorData.tfqk" placeholder="请选择">
                                                                <el-option v-for="item in tongfeng" :key="item.value"
                                                                    :label="item.label" :value="item.value">
                                                                </el-option>
                                                            </el-select>
                                                        </el-col>
                                                    </el-row>
                                                    <el-row type="flex" justify="center" :gutter="20">
                                                        <el-col :span="3">
                                                            <span>接触时间</span>
                                                        </el-col>
                                                        <el-col :span="7">

                                                            <el-date-picker style="width: 180px;"
                                                                v-model="contactorData.contactTime" type="datetime"
                                                                format="yyyy-MM-dd HH:mm"
                                                                value-format="yyyy-MM-dd HH:mm" placeholder="选择接触时间">
                                                            </el-date-picker>
                                                        </el-col>
                                                        <el-col :span="3">
                                                            <span>接触时长</span>
                                                        </el-col>
                                                        <el-col :span="7">
                                                            <el-input v-model="contactorData.duration">
                                                                <template slot="append">分钟</template>
                                                            </el-input>
                                                        </el-col>
                                                    </el-row>
                                                    <el-row type="flex" justify="center" :gutter="20">
                                                        <el-col :span="5">
                                                            <span>接触时戴口罩情况</span>
                                                        </el-col>
                                                        <el-col :span="5">
                                                            <el-select v-model="contactorData.kzqk" placeholder="请选择">
                                                                <el-option v-for="item in kzlx" :key="item.value"
                                                                    :label="item.label" :value="item.value">
                                                                </el-option>
                                                            </el-select>
                                                        </el-col>
                                                        <el-col :span="3">
                                                            <span>对方口罩</span>
                                                        </el-col>
                                                        <el-col :span="5">
                                                            <el-select v-model="contactorData.dfkz" placeholder="请选择">
                                                                <el-option v-for="item in kzlx" :key="item.value"
                                                                    :label="item.label" :value="item.value">
                                                                </el-option>
                                                            </el-select>
                                                        </el-col>
                                                    </el-row>

                                                </el-row>
                                                <el-row v-show="newSome==2" id="areaRow">
                                                    <el-row type="flex" justify="center" :gutter="20">
                                                        <div class="citys" id="reachcitys">
                                                            选择患者接触地区所在的城市：
                                                            <select class="city-select" id="reachprovince"
                                                                name="province"></select>
                                                            <select class="city-select" id="reachcity"
                                                                name="city"></select>
                                                            <select class="city-select" id="reacharea"
                                                                name="area"></select>
                                                        </div>
                                                    </el-row>
                                                    <el-row type="flex" justify="center" :gutter="20">
                                                        具体地址:
                                                        <el-col :span="15">
                                                            <el-input id="xqAddress" placeholder="具体地址"
                                                                v-model="areaData.xqAddress"></el-input>
                                                        </el-col>
                                                    </el-row>

                                                    <el-row type="flex" justify="center" :gutter="0">
                                                        <el-col :span="10">
                                                            从：
                                                            <el-date-picker placeholder="选择到达时刻" type="datetime"
                                                                format="yyyy-MM-dd HH:mm"
                                                                value-format="yyyy-MM-dd HH:mm"
                                                                v-model="areaData.reachTime">
                                                            </el-date-picker>
                                                        </el-col>
                                                        <el-col :span="10">
                                                            到：
                                                            <el-date-picker placeholder="选择离去时刻" type="datetime"
                                                                format="yyyy-MM-dd HH:mm"
                                                                value-format="yyyy-MM-dd HH:mm"
                                                                v-model="areaData.leaveTime">
                                                            </el-date-picker>
                                                        </el-col>
                                                    </el-row>
                                                    <el-row type="flex" justify="center" :gutter="20">
                                                        <el-col :span="4">
                                                            <span>戴口罩情况</span>
                                                        </el-col>
                                                        <el-col :span="6">
                                                            <el-select v-model="areaData.kzqk" placeholder="请选择">
                                                                <el-option v-for="item in kzlx" :key="item.value"
                                                                    :label="item.label" :value="item.value">
                                                                </el-option>
                                                            </el-select>
                                                        </el-col>
                                                        <el-col :span="3">
                                                            <span>环境状况</span>
                                                        </el-col>
                                                        <el-col :span="6">
                                                            <el-select v-model="areaData.tfqk" placeholder="请选择">
                                                                <el-option v-for="item in tongfeng" :key="item.value"
                                                                    :label="item.label" :value="item.value">
                                                                </el-option>
                                                            </el-select>
                                                        </el-col>
                                                    </el-row>

                                                </el-row>
                                                <el-row v-show="newSome==3" id="trafficRow">
                                                    <el-select v-model="trainorplant" placeholder="选择乘坐过的交通工具">
                                                        <el-option v-for="item in transportationFacility"
                                                            :key="item.value" :label="item.label" :value="item.value">
                                                        </el-option>
                                                    </el-select>
                                                    <el-row v-show="trainorplant==1">
                                                        <el-row>
                                                            <el-col :span="4">
                                                                <span>车次</span>
                                                            </el-col>
                                                            <el-col :span="6">
                                                                <el-select v-model="trainValue" filterable clearable
                                                                    v-el-select-loadmore="loadmore" placeholder="请选择车次"
                                                                    :filter-method="trainfilter" @change="getTrainCity">
                                                                    <el-option v-for="item in trainNumber"
                                                                        :key="item.train_number"
                                                                        :label="item.train_number"
                                                                        :value="item.train_number">
                                                                    </el-option>
                                                                </el-select>
                                                            </el-col>
                                                            <el-col :span="2">
                                                                <span>起点</span>
                                                            </el-col>
                                                            <el-col :span="5">
                                                                <el-input v-model="trainCityData.startCity" readonly>
                                                                </el-input>
                                                            </el-col>
                                                            <el-col :span="2">
                                                                <span>终点</span>
                                                            </el-col>
                                                            <el-col :span="5">
                                                                <el-input v-model="trainCityData.endCity" readonly>
                                                                </el-input>
                                                            </el-col>
                                                        </el-row>
                                                        <el-row>
                                                            <el-col :span="4">
                                                                <span>上车车站</span>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <el-input v-model="trainCityData.startStation">
                                                                </el-input>

                                                            </el-col>
                                                            <el-col :span="4">
                                                                <span>下车车站</span>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <el-input v-model="trainCityData.endStation">
                                                                </el-input>
                                                            </el-col>
                                                        </el-row>
                                                        <el-row>
                                                            <el-col :span="4">
                                                                <span>
                                                                    上车时间
                                                                </span>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <el-date-picker placeholder="选择上车时刻" type="datetime"
                                                                    format="yyyy-MM-dd HH:mm"
                                                                    value-format="yyyy-MM-dd HH:mm"
                                                                    v-model="trainCityData.startTime">
                                                                </el-date-picker>
                                                            </el-col>
                                                            <el-col :span="4">
                                                                <span>
                                                                    下车时间
                                                                </span>
                                                            </el-col>
                                                            <el-col :span="8">
                                                                <el-date-picker placeholder="选择下车时刻" type="datetime"
                                                                    format="yyyy-MM-dd HH:mm"
                                                                    value-format="yyyy-MM-dd HH:mm"
                                                                    v-model="trainCityData.endTime">
                                                                </el-date-picker>
                                                            </el-col>
                                                        </el-row>
                                                    </el-row>
                                                    <el-row v-show="trainorplant==2">
                                                    </el-row>
                                                </el-row>
                                                <span slot="footer" class="dialog-footer">
                                                    <el-button type="primary" @click="newContactor" v-show="newSome==1">
                                                        提交
                                                    </el-button>
                                                    <el-button type="primary" @click="newArea" v-show="newSome==2">提交
                                                    </el-button>
                                                    <el-button type="primary" v-show="newSome==3&&trainorplant==1"
                                                        @click="createTrainRelation">提交
                                                    </el-button>
                                                    <el-button type="primary" v-show="newSome==3&&trainorplant==2">提交
                                                    </el-button>
                                                    <el-button @click="newDialogVisible = false">关闭</el-button>
                                                </span>
                                            </el-dialog>
                                        </el-col>
                                        <el-col :span="12" style="line-height: 2;">
                                            <span>接触情况</span>
                                        </el-col>
                                    </el-row>
                                    <el-table :data="contactorTable" stripe :row-class-name="tableRowClassName">

                                        <el-table-column label="姓名" width="95" prop="name"
                                            :show-overflow-tooltip='false'>
                                            <template slot-scope="scope">
                                                <el-popover trigger="hover" placement="right">
                                                    <p>姓名: {{ scope.row.name }}</p>
                                                    <p>接触类型: {{ scope.row.contactNameCn }}</p>
                                                    <p>手机号：{{scope.row.contactorPhone}}</p>
                                                    <div slot="reference" class="name-wrapper">
                                                        <el-tag size="medium">{{ scope.row.name }}</el-tag>
                                                    </div>
                                                </el-popover>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="身份证" width="175" prop="idCard"
                                            :show-overflow-tooltip='true'>

                                        </el-table-column>
                                        <el-table-column label="接触时间" width="135" prop="contactTime"
                                            :show-overflow-tooltip='true'>

                                        </el-table-column>
                                        <el-table-column>
                                            <template slot="header" slot-scope="scope">
                                                <el-input v-model="searchData" id="fd-search-input"
                                                    @change="cxPersonChange" size="mini" placeholder="姓名/身份证搜索" />
                                            </template>
                                            <template slot-scope="scope">
                                                <el-button size="mini" id="el-main-button"
                                                    @click="newDialog2(scope.row)">编辑
                                                </el-button>
                                                <el-button size="mini" @click="deleterelation(scope.row)">删除
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <el-pagination background layout="prev, pager, next" :total="countNum.contactCount"
                                        :page-size="pagesize" @current-change="handleCurrentChange">
                                    </el-pagination>
                                    <el-dialog title="详情" :visible.sync="newPersonXqDialogVisible" width="50%">
                                        <el-row>
                                            <el-radio v-model="sfkbj" label="1">详情</el-radio>
                                            <el-radio v-model="sfkbj" label="2">编辑</el-radio>
                                        </el-row>

                                        <el-row type="flex">
                                            <el-col :span="3">
                                                <span>姓名</span>
                                            </el-col>
                                            <el-col :span="6">
                                                <el-input placeholder="接触者姓名" :disabled="true"
                                                    v-model="xqContactorData.contactorName">
                                                </el-input>
                                            </el-col>
                                            <el-col :span="3" :offset="1">
                                                <span>身份证</span>
                                            </el-col>
                                            <el-col :span="6">
                                                <el-input placeholder="接触者身份证" :disabled="true"
                                                    v-model="xqContactorData.contactorIdCard"></el-input>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex">
                                            <el-col :span="3">
                                                <span>接触类型</span>
                                            </el-col>
                                            <el-col :span="6">

                                                <el-select :disabled="sfkbj==1" v-model="xqContactorData.contactName"
                                                    placeholder="请选择">
                                                    <el-option v-for="item in contactType" :key="item.value"
                                                        :label="item.label" :value="item.value">
                                                    </el-option>
                                                </el-select>
                                            </el-col>
                                            <el-col :span="3" :offset="1">
                                                <span>接触环境</span>
                                            </el-col>
                                            <el-col :span="6">
                                                <el-select :disabled="sfkbj==1" v-model="xqContactorData.tfqk"
                                                    placeholder="请选择">
                                                    <el-option v-for="item in tongfeng" :key="item.value"
                                                        :label="item.label" :value="item.value">
                                                    </el-option>
                                                </el-select>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex">
                                            <el-col :span="3">
                                                <span>接触时间</span>
                                            </el-col>
                                            <el-col :span="7">
                                                <el-date-picker style="width: 180px;" :disabled="sfkbj==1"
                                                    type="datetime" format="yyyy-MM-dd HH:mm"
                                                    value-format="yyyy-MM-dd HH:mm" placeholder="选择接触时间"
                                                    v-model="xqContactorData.contactTime">
                                                </el-date-picker>
                                            </el-col>
                                            <el-col :span="3">
                                                <span>接触时长</span>
                                            </el-col>
                                            <el-col :span="7">
                                                <el-input :disabled="sfkbj==1" v-model="xqContactorData.duration">
                                                    <template slot="append">分钟</template>
                                                </el-input>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex">
                                            <el-col :span="3">
                                                <span>接触时戴口罩情况</span>
                                            </el-col>
                                            <el-col :span="6">
                                                <el-select :disabled="sfkbj==1" v-model="xqContactorData.kzqk"
                                                    placeholder="请选择">
                                                    <el-option v-for="item in kzlx" :key="item.value"
                                                        :label="item.label" :value="item.value">
                                                    </el-option>
                                                </el-select>
                                            </el-col>
                                            <el-col :span="3" :offset="1">
                                                <span>对方口罩</span>
                                            </el-col>
                                            <el-col :span="6">
                                                <el-select :disabled="sfkbj==1" v-model="xqContactorData.dfkz"
                                                    placeholder="请选择">
                                                    <el-option v-for="item in kzlx" :key="item.value"
                                                        :label="item.label" :value="item.value">
                                                    </el-option>
                                                </el-select>
                                            </el-col>
                                        </el-row>
                                        <el-row type="flex">
                                            <el-col :span="3">
                                                <span>对方电话</span>
                                            </el-col>
                                            <el-col :span="6">
                                                <el-input placeholder="接触者电话" :disabled="sfkbj==1"
                                                    v-model="xqContactorData.contactorPhone"></el-input>
                                            </el-col>
                                        </el-row>

                                        <span slot="footer" class="dialog-footer">
                                            <el-button v-show="sfkbj==2" @click="bjPerson">提交
                                            </el-button>
                                            <el-button @click="newPersonXqDialogVisible = false">关闭</el-button>
                                        </span>
                                    </el-dialog>

                                    <el-table :data="areaTable" stripe :row-class-name="tableRowClassName">


                                        <el-table-column label="地区" width="135" prop="addressName"
                                            :show-overflow-tooltip='false'>
                                            <template slot-scope="scope">
                                                <el-popover trigger="hover" placement="top">
                                                    <p>地 区：{{scope.row.addressName}}</p>
                                                    <p>具体地址: {{ scope.row.xqAddress }}</p>
                                                    <div slot="reference" class="name-wrapper">
                                                        <el-tag size="medium">{{ scope.row.addressName }}</el-tag>
                                                    </div>
                                                </el-popover>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="到达时刻" width="135" prop="reachTime"
                                            :show-overflow-tooltip='true'>
                                        </el-table-column>
                                        <el-table-column label="离去时刻" width="135" prop="leaveTime"
                                            :show-overflow-tooltip='true'></el-table-column>
                                        <el-table-column>
                                            <template slot="header" slot-scope="scope">
                                                <el-input id="fd-areasearch-input" v-model="searchAreaData"
                                                    @change="cxAreaChange" size="mini" placeholder="输入地区搜索" />
                                            </template>
                                            <template slot-scope="scope">
                                                <el-button size="mini" id="el-main-button"
                                                    @click="newDialog3(scope.row)">编辑
                                                </el-button>
                                                <el-button size="mini" @click="deleteArearRelation(scope.row)">删除
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <el-pagination background layout="prev, pager, next" :total="countNum.reachCount"
                                        :page-size="pagesize" @current-change="handleAreaCurrentChange">
                                    </el-pagination>
                                    <el-dialog title="详情" :visible.sync="newAreaXqDialogVisible" width="50%"
                                        @opened="bjareainit">
                                        <el-row>
                                            <el-radio v-model="sfkbj" label="1">详情</el-radio>
                                            <el-radio v-model="sfkbj" label="2">编辑</el-radio>
                                        </el-row>
                                        <el-row>
                                            <el-row type="flex" justify="center" :gutter="20">
                                                <div class="citys" id="bjreachcitys">
                                                    选择患者接触地区所在的城市：
                                                    <select class="city-select" id="bjreachprovince"
                                                        name="province"></select>
                                                    <select class="city-select" id="bjreachcity" name="city"></select>
                                                    <select class="city-select" id="bjreacharea" name="area"></select>
                                                </div>
                                            </el-row>
                                            <el-row type="flex" justify="center" :gutter="20">
                                                具体地址:
                                                <el-col :span="15">
                                                    <el-input id="xqAddress" placeholder="具体地址"
                                                        v-model="xqAreaData.xqAddress" :disabled="sfkbj==1"></el-input>
                                                </el-col>
                                            </el-row>

                                            <el-row type="flex" justify="center" :gutter="0">
                                                <el-col :span="10">
                                                    从：
                                                    <el-date-picker placeholder="选择到达时刻" type="datetime"
                                                        format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"
                                                        v-model="xqAreaData.reachTime" :disabled="sfkbj==1">
                                                    </el-date-picker>
                                                </el-col>
                                                <el-col :span="10">
                                                    到：
                                                    <el-date-picker placeholder="选择离去时刻" type="datetime"
                                                        format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm"
                                                        v-model="xqAreaData.leaveTime" :disabled="sfkbj==1">
                                                    </el-date-picker>
                                                </el-col>
                                            </el-row>
                                            <el-row type="flex" justify="center" :gutter="20">
                                                <el-col :span="4">
                                                    <span>戴口罩情况</span>
                                                </el-col>
                                                <el-col :span="6">
                                                    <el-select v-model="xqAreaData.kzqk" placeholder="请选择"
                                                        :disabled="sfkbj==1">
                                                        <el-option v-for="item in kzlx" :key="item.value"
                                                            :label="item.label" :value="item.value">
                                                        </el-option>
                                                    </el-select>
                                                </el-col>
                                                <el-col :span="3">
                                                    <span>环境状况</span>
                                                </el-col>
                                                <el-col :span="6">
                                                    <el-select v-model="xqAreaData.tfqk" placeholder="请选择"
                                                        :disabled="sfkbj==1">
                                                        <el-option v-for="item in tongfeng" :key="item.value"
                                                            :label="item.label" :value="item.value">
                                                        </el-option>
                                                    </el-select>
                                                </el-col>
                                            </el-row>
                                        </el-row>
                                        <span slot="footer" class="dialog-footer">
                                            <el-button v-show="sfkbj==2" @click="bjArea">提交
                                            </el-button>
                                            <el-button @click="newAreaXqDialogVisible = false">关闭</el-button>
                                        </span>
                                    </el-dialog>
                                    <el-table stripe :row-class-name="tableRowClassName" :data="trafficTable">


                                        <el-table-column label="种类" width="60" :show-overflow-tooltip='false'
                                            prop="trafficType">
                                            <template slot-scope="scope">
                                                <el-popover trigger="hover" placement="top">
                                                    <p>起 点：{{scope.row.startCity}}</p>
                                                    <p>终 点: {{ scope.row.endCity }}</p>
                                                    <p>上车时间: {{ scope.row.startTime }}</p>
                                                    <p>下车时间: {{ scope.row.endTime }}</p>
                                                    <div slot="reference" class="name-wrapper">
                                                        <el-tag size="medium">{{ scope.row.trafficType }}</el-tag>
                                                    </div>
                                                </el-popover>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="车次/航班号" width="125" :show-overflow-tooltip='true'
                                            prop="trainNumber">
                                        </el-table-column>
                                        <el-table-column label="上车车站" width="110" :show-overflow-tooltip='true'
                                            prop="startStation">
                                        </el-table-column>
                                        <el-table-column label="下车车站" width="110" :show-overflow-tooltip='true'
                                            prop="endStation">
                                        </el-table-column>
                                        <el-table-column>
                                            <template slot="header" slot-scope="scope">
                                                <el-input id="fd-trainsearch-input" v-model="searchTrafficData"
                                                    @change="cxTrafficChange" size="mini" placeholder="车次/航班号搜索" />
                                            </template>
                                            <template slot-scope="scope">
                                                <el-button size="mini" id="el-main-button"
                                                    @click="newDialog4(scope.row)">编辑
                                                </el-button>
                                                <el-button size="mini" @click="deleteTrafficRelation(scope.row)">删除
                                                </el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                    <el-pagination background layout="prev, pager, next" :total="countNum.trafficCount"
                                        :page-size="pagesize" @current-change="handleTrafficCurrentChange">
                                    </el-pagination>
                                    <el-dialog title="详情" :visible.sync="newTrafficXqDialogVisible" width="50%">
                                        <el-row>
                                            <el-radio v-model="sfkbj" label="1">详情</el-radio>
                                            <el-radio v-model="sfkbj" label="2">编辑</el-radio>
                                        </el-row>
                                        <el-row>
                                            <el-row>
                                                <el-col :span="8">
                                                    <span>
                                                        交通工具种类
                                                    </span>
                                                </el-col>
                                                <el-col :span="8">
                                                    <el-input :disabled="true" v-model="trainCityData.trafficType">
                                                    </el-input>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="4">
                                                    <span>车次</span>
                                                </el-col>
                                                <el-col :span="6">
                                                    <el-input :disabled="true" v-model="trainCityData.trainNumber">
                                                    </el-input>
                                                </el-col>
                                                <el-col :span="2">
                                                    <span>起点</span>
                                                </el-col>
                                                <el-col :span="5">
                                                    <el-input :disabled="true" v-model="trainCityData.startCity">
                                                    </el-input>
                                                </el-col>
                                                <el-col :span="2">
                                                    <span>终点</span>
                                                </el-col>
                                                <el-col :span="5">
                                                    <el-input :disabled="true" v-model="trainCityData.endCity">
                                                    </el-input>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="4">
                                                    <span>上车车站</span>
                                                </el-col>
                                                <el-col :span="8">
                                                    <el-input :disabled="sfkbj==1" v-model="trainCityData.startStation">
                                                    </el-input>

                                                </el-col>
                                                <el-col :span="4">
                                                    <span>下车车站</span>
                                                </el-col>
                                                <el-col :span="8">
                                                    <el-input :disabled="sfkbj==1" v-model="trainCityData.endStation">
                                                    </el-input>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="4">
                                                    <span>
                                                        上车时间
                                                    </span>
                                                </el-col>
                                                <el-col :span="8">
                                                    <el-date-picker :disabled="sfkbj==1" placeholder="选择上车时刻"
                                                        type="datetime" format="yyyy-MM-dd HH:mm"
                                                        value-format="yyyy-MM-dd HH:mm"
                                                        v-model="trainCityData.startTime">
                                                    </el-date-picker>
                                                </el-col>
                                                <el-col :span="4">
                                                    <span>
                                                        下车时间
                                                    </span>
                                                </el-col>
                                                <el-col :span="8">
                                                    <el-date-picker :disabled="sfkbj==1" placeholder="选择下车时刻"
                                                        type="datetime" format="yyyy-MM-dd HH:mm"
                                                        value-format="yyyy-MM-dd HH:mm" v-model="trainCityData.endTime">
                                                    </el-date-picker>
                                                </el-col>
                                            </el-row>
                                        </el-row>
                                        <span slot="footer" class="dialog-footer">
                                            <el-button v-show="sfkbj==2" @click="bjTraffic()">提交
                                            </el-button>
                                            <el-button @click="newTrafficXqDialogVisible = false">关闭</el-button>
                                        </span>
                                    </el-dialog>
                                </div>
                            </el-main>
                        </el-container>
                    </el-container>

                </el-main>
            </el-container>
        </el-container>
    </div>

    <script src="/js/data_entry.js" type="text/javascript"></script>
</body>

</html>